import React, { memo } from "react";
import css from './css.module.scss'
import { Row, Col } from 'antd';
import { IMGURL } from '../../services/config'
import { useHistory } from 'react-router-dom';
import { Empty } from 'antd';
export default memo(function RechTitle(props) {
    const { list = [], spanNumber = 8 } = props
    const history = useHistory();
    const handDetails = (item) => {
        //返回true可以跳转详情 
        console.log(item)
        history.push('/worksDetails?' + item.worksId);
    }
    return (
        <div className={css.ar_list}>
            {list.length !== 0 ? <Row gutter={[16, 30]}>
                {list.map((item, index) => {
                    return (
                        <Col span={spanNumber} key={item.worksId} onClick={e => handDetails(item)}>
                            <div className={css.wor_item}>
                                <img className={css.item_img} src={IMGURL + item.listImage} alt='作品' />
                                <div className={css.title_box}>
                                    <div className={css.title}> {item.worksTitle}</div>
                                    <div className={css.name_box}>
                                        <img src={IMGURL + item.picture} alt="" className={css.head_img} />
                                        <div className={css.name}>
                                            {item.author}
                                        </div>
                                    </div>
                                    <div className={css.hand_vote}>
                                        <div className={css.number}>{item.number}票</div>
                                        <div className={css.hand_btn}>
                                            投票
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </Col>
                    )
                })}
            </Row> : <Empty description='暂无数据' />}

        </div>
    )
})
